import React, { useEffect, useState } from "react";
import "./index.less";
import { NavBar, Tabs, Badge, Toast } from "antd-mobile";
import { Spin } from "antd";
import { useNavigate } from "react-router-dom";
import { governPolicyList } from "./service";

const PartyBuildingCulture: React.FC = () => {
  const navigate = useNavigate();
  const [policyList, setPolicyList] = useState([]);

  const goto = (url: string) => () => {
    navigate(url);
  };

  useEffect(() => {
    tabsOnChange("全部");
  }, []);

  const tabsOnChange = function (id: string) {
    governPolicyList({ villageCode: "511602006004", current: 1, size: 10 })
      .then((res) => {
        if (res.code == 200) {
          setPolicyList(res.data);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  };

  return (
    <div className="ListOfPartyMembers_contarnier">
      <div className="header-bg">
        <NavBar onBack={() => navigate("/")}>
          <div className="commontitle">服务政策</div>
        </NavBar>
      </div>
      <div className="ListOfPartyMembers-content">
        <div className="menberList">
          {policyList?.map((dataItem, dataIndex) => {
            return (
              <div
                key={dataIndex}
                className="menberList_item"
                onClick={() =>
                  navigate(
                    `/contentDetails?type=${"servicePolicy"}&&detail=${
                      dataItem?.id
                    }`,
                    { state: { ...dataItem, type: "servicePolicy" } }
                  )
                }
              >
                <div className="menberList_imformation">
                  <div className="menberList_imformation-title">
                    {dataItem?.policyTitle || "XX"}
                  </div>
                  <div className="menberList_imformation-typeAndTime">
                    <div className="imformation-type">
                      {dataItem?.smallType || ""}
                    </div>
                  </div>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
};

export default PartyBuildingCulture;
